<template>
    <div id="rank-box" class="container">
        <div class="left-nav">
            <ul>巅峰榜</ul>
            <a-divider />
            <li><a href="/functions/music/index/rank/1_1">飙升榜</a></li>
            <li><a href="/functions/music/index/rank/1_2">热歌榜</a></li>
            <li><a href="/functions/music/index/rank/1_3">新歌榜</a></li>
            <br>
            <ul>地区榜</ul>
            <a-divider />
            <li><a href="/functions/music/index/rank/2_1">内陆</a></li>
            <li><a href="/functions/music/index/rank/2_2">台湾</a></li>
            <li><a href="/functions/music/index/rank/2_3">非汉语榜</a></li>
            <br>
            <ul>特色榜</ul>
            <a-divider />
            <li><a href="/functions/music/index/rank/3_1">国风</a></li>
            <li><a href="/functions/music/index/rank/3_2">伤感</a></li>
            <li><a href="/functions/music/index/rank/3_3">流行</a></li>
        </div>
        <div class="display-box">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup>
import {  RouterView } from 'vue-router';
</script>

<style scoped>
.container {
    display: flex;
    width: 100%;
    height: auto; 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 

.left-nav {
    margin-top: 20px;
    margin-left: 200px;
    flex: 0 0 150px; /* 固定宽度 */
    height: 650px; /* 或者你需要的任何高度，比如 500px，但这里为了响应式使用 100% */
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* 如果内容超出则显示滚动条 */
    border-right: #e7e7e7 solid 1px; /* 右侧边框 */
    outline: #e7e7e7 solid 1px;
}

.left-nav ul {
    margin: 15px 0;
    font-size: 20px;
    user-select: none;
    padding-left: 0; 
    list-style: none; 
}

.left-nav li {
    margin: 5px 0;
    font-size: 16px;
    list-style: none;
}

.left-nav a {
    color: black;
    text-decoration: none;
}

.display-box {
    margin-top: 20px;
    width: 1200px;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: none; 
  
}


::-webkit-scrollbar {
    display: none;
}
</style>